<mat-card #targetUp id="big" ngClass.lt-md="big-mobile" ngClass.gt-sm="big-desktop" fxLayout="column" class="mat-elevation-z3">
  <app-header></app-header>
  <div ngClass.lt-md="mobile-padding" fxFlex="1 1">
    <div style="height: 100%; overflow: auto;" fxLayout="row wrap" fxLayoutAlign="center center">
      <div fxFlex="1 1 40%" ngClass.lt-md="mobile-header-text" fxFlex.lt-md="1 1 100%">
        <h1 style="margin-bottom: 0.5em;">The self hostable cloud to run</h1>
        <h1 style="margin-top: 0.5em; color: #2196F3">Lambda functions and microservices</h1>
        <h2>Run and manage thousands of server apps with ease.</h2>
        <h2>Autogenerated type safe clients make calling the backend as easy as using a library.</h2>
        <h2>Open Source - No vendor lock in, you can host 1Backend yourself.</h2>
      </div>
      <div fxHide.lt-md fxFlex="1 1 5%">
      </div>
      <div fxFlex="1 1 40%" fxFlex.lt-md="1 1 100%" style="height: 25em;" (click)="scroll(targetDown)">
        <app-demo style="margin-top: 2em"></app-demo>
      </div>
    </div>
  </div>
  <div style="text-align: center; margin-top: -3em;">
    <button mat-fab (click)="scroll(targetDown)" color="accent">
      <mat-icon aria-hidden="false">keyboard_arrow_down</mat-icon>
    </button>
  </div>
</mat-card>
<span #targetDown></span>

<div style="margin-left:7.1%; margin-bottom: 15px" class="project-title">
  <h2 id="getStarted">Create a project</h2>
  <div>After clicking create, you will get a live app ready to use - just plug in your own code</div>
</div>

<div>
  <mat-card style="padding-left: 0; padding-right: 0" class="mat-elevation-z4">
    <app-create-project></app-create-project>
  </mat-card>
</div>

<div style="margin-left:7.1%; margin-bottom: 15px" class="project-title">
  <h2 id="pricing">Pricing</h2>
  <div>In case you don't want to deal with hosting and maintenance, we manage this installation for you</div>
</div>

<div>
  <mat-card style="padding-left: 0; padding-right: 0;" class="mat-elevation-z4">
    <app-pricing></app-pricing>
  </mat-card>
</div>
